<template>
	<view class="content">
		<image src="/static/jiameng/top.png" mode="" class="top"></image>
		<view class="formMain">
			<view class="Alltitle">
				申请报名
			</view>
			<view class="inputItem">
				<view class="title">姓名</view>
				<input type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="pla">
			</view>
			<view class="inputItem">
				<view class="title">电话号码</view>
				<input class="number" v-model="phone" type="number" placeholder="请输入电话号码" placeholder-class="pla">
				<view class="btn" @click="handleSendCode" :class="{none:verificationFlag}">
					{{!verificationFlag?'获取验证码':count+'s'}}
				</view>
			</view>
			<view class="inputItem">
				<view class="title">验证码</view>
				<input type="number" v-model="yzm" placeholder="请输入验证码" placeholder-class="pla">
			</view>
			<view class="inputItem">
				<view class="title">所在区域</view>
				<picker mode="selector" :range="streetList" value="0" @change="bindTypeChange">
					<view class="picker">
						<view class="pick" :class="{picked:stree}">
							{{stree?stree:'请选择所在区域'}}
						</view>
						<image src="/static/jiameng/jt.png" class="jt" mode=""></image>
					</view>

				</picker>
			</view>
			<view class="selecter">
				<view class="title">有过零工行业经历？</view>
				<view class="select">
					<view class="selectitem" v-for="(item,index) in isLgList" :class="{act:lgIndex==index}" :key='index'
						@click="picklg(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="selecter">
				<view class="title">在义乌驻留的时间？</view>
				<view class="select">
					<view class="selectitem" v-for="(item,index) in howLongList" :class="{act:longIndex==index}"
						:key='index' @click="pickTime(index)">
						{{item}}
					</view>
				</view>

			</view>
			<view class="selecter">
				<view class="title">是团队还是个人？</view>
				<view class="select">
					<view class="selectitem" v-for="(item,index) in isTeamList" :class="{act:teamIndex==index}"
						:key='index' @click="pickTeam(index)">
						{{item}}
					</view>
				</view>

			</view>
			<view class="Allbtn" @click="add_Partner">
				提交
			</view>
		</view>
		<image src="/static/jiameng/logo.png" mode="" class="bottom"></image>
	</view>
</template>

<script>
	import unit from '@/libs/newUnit.js'
	export default {
		data() {
			return {
				isLgList: ['否', '是'],
				howLongList: ['1-2年', '3-5年', '5年以上'],
				isTeamList: ['团队', '个人'],
				lgIndex: 0,
				longIndex: 0,
				teamIndex: 0,
				yzPhone: false,
				verificationFlag: false,
				count: 60,
				phone: '',
				name: '',
				yzm: '',
				timer: null,
				addr: '',
				stree: '',
				streetList: [],
				userType: 0
			};
		},
		methods: {
			picklg(index) {
				this.lgIndex = index
			},
			pickTeam(index) {
				this.teamIndex = index
			},
			pickTime(index) {
				this.longIndex = index
			},
			// 发送验证码
			async handleSendCode() {
				if (this.verificationFlag) return
				if (!this.checkLoginNameFormat(this.phone)) return
				this.verificationFlag = true
				
				const mobile = this.$jsencrypt.setEncrypt(this.$api.publicKey, this.phone);
				let res = await this.$fetch(this.$api.mobile_verification_code, {
					length: 6,
					mobile
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.timer = setInterval(() => {
					if (this.count == 0) {
						clearInterval(this.timer)
						this.verificationFlag = false
						this.count = 60
					} else {
						this.count = --this.count
					}
					console.log(this.verificationFlag)
				}, 1000)
			},
			bindTypeChange({
				detail: {
					value
				}
			}) {
				this.stree = this.streetList[value]
				console.log('选择地点', this.stree)
				// this.requestObj.expectAddress = this.addressKeys[value]
			},
			// 验证手机号格式是否正确
			checkLoginNameFormat(mobile) {
				let reg = /^[1][3456789][0-9]{9}$/
				if (!reg.test(mobile)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					this.yzPhone = false
					return this.yzPhone
				}
				this.yzPhone = true
				return this.yzPhone
			},
			add_Partner() {
				console.log(this.phone, this.yzm, this.name, this.stree, this.lgIndex, this.longIndex, this.teamIndex)
				if (this.yzm.length != 6 || this.name == '' || this.yzPhone == false || this.stree == '') return uni
					.showToast({
						title: '请完整填写信息',
						icon: 'none'
					})
				unit.add_Partner(this.phone, this.yzm, this.name, this.stree, this.lgIndex, this.longIndex, this.teamIndex)
					.then(v => {
						if (v.code == 0) {
							uni.showToast({
								title: '已提交',
								icon: 'none',
								success: () => {
									if (this.userType == 0) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									} else {
										uni.reLaunch({
											url: '/pages/app-employer/send-job/send-job-new',
											animationType: 'fade-in',
											animationDuration: 100
										})
									}
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			},
			// 获取街道
			getMyStreet() {
				// let areaCode = uni.getStorageSync('region').slice(0,6)
				let areaCode = '330782'
				let allStreet = uni.getStorageSync('street')
				let obj = {}
				for (let key in allStreet) {
					if (key.indexOf(areaCode) !== -1) {
						obj[key] = allStreet[key]
					}
				}
				this.streetList = Object.values(obj)
			},
			init() {
				this.getMyStreet()
				if (uni.getStorageSync('userType') == 1) {
					this.userType = 1
				}
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}

	image {
		display: block;
	}

	.content {
		background-color: #4D4DF8;
		padding-bottom: 45rpx;
	}

	.top {
		width: 750rpx;
		height: 830rpx;
	}

	.formMain {
		width: 690rpx;
		height: 1279rpx;
		background: #FFFFFF;
		border: 8rpx solid #000000;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #3829D4;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 40rpx;

		.Alltitle {
			color: #1A1A1A;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.inputItem {
			display: flex;
			align-items: center;
			height: 98rpx;
			border-bottom: 1rpx solid #F2F2F2;

			.title {
				width: 185rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			.pla {
				color: #A5A5A5;
				font-size: 28rpx;
			}

			input {
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;

				&.number {
					width: 250rpx;
				}
			}

			.btn {
				width: 128rpx;
				height: 48rpx;
				background: #4242E5;
				border-radius: 8rpx;
				margin-left: 30rpx;
				line-height: 48rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				font-weight: 500;
				text-align: center;

				&.none {
					background-color: #A5A5A5;
					font-size: 26rpx;
				}
			}

			.picker {
				display: flex;
				justify-content: space-between;

				.pick {
					width: 350rpx;
					color: #A5A5A5;
					font-size: 28rpx;

					&.picked {
						color: #1A1A1A;
						font-weight: 500;
					}
				}

				.jt {
					width: 44rpx;
					height: 44rpx;
				}
			}

		}

		.selecter {
			height: 195rpx;
			border-bottom: 1rpx solid #F2F2F2;
			padding-top: 35rpx;

			.title {
				color: #1A1A1A;
				font-size: 28rpx;
				font-weight: 500;
			}

			.select {
				display: flex;
				margin-top: 36rpx;

				.selectitem {
					margin-right: 15rpx;
					height: 60rpx;
					width: 190rpx;
					text-align: center;
					line-height: 60rpx;
					background: #FFFFFF;
					border: 1rpx solid #BDBDBD;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #1A1A1A;
					font-weight: 500;

					&.act {
						background-color: #4D4DF8;
						border-color: #4D4DF8;
						color: #fff;
					}
				}
			}
		}

		.Allbtn {
			width: 594rpx;
			height: 88rpx;
			background: #4D4DF8;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(77, 77, 248, 0.2);
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 23rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.bottom {
		width: 220rpx;
		height: 68rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>
